.head {
  margin-top: 4%;
  font-size: 55px;
  text-align: center;
}

.disc {

  margin-top: 2%;

  font-size: 30px;
  text-align: center;
  margin-bottom: 10px;

}

#container-middle-bottom {
  margin: 1% 0;
  text-align: center;
  font-size: 30px;
}

/* sliding */

.slider-frame {
  overflow: hidden;
  height: 650px;
  width: 50%;
  margin: auto;

  margin-top: 40px;

}

@-webkit-keyframes slide-animation {
  0% {
    left: 0px;
  }

  10% {
    left: 0px;
  }

  30% {
    left: 1200px;
  }

  30% {
    left: 1200px;
  }

  40% {
    left: 2400px;
  }

  50% {
    left: 2400px;
  }

  60% {
    left: 1200px;
  }

  70% {
    left: 1200px;
  }

  80% {
    left: 0px;
  }

  90% {
    left: 0px;
  }

  100% {
    left: 0px;
  }

}

.slider-images {
  width: 3600px;
  height: 650px;
  margin: 0 0 0 -2400px;
  position: relative;
  -webkit-animation-name: slide-animation;
  -webkit-animation-duration: 33s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  -webkit-animation-play-state: running;
}

.images {
  height: 650px;
  width: 1200px;
  position: relative;
  float: left;
}

#container-middle-bottom>div {
  padding: 3%;

}

#container-middle-bottom>div>p {
  margin-top: 8%;
  font-family: sans-serif;

}

#signhead {
  margin: 4% 0;
  text-align: center;
  font-family: sans-serif;
}

div>form>input,
label {
  padding: 1% 4%;

  font-size: 20px;

  display: block;
  margin: auto;
  text-align: left;
 width: 400px;
  
  
}
#sign:hover{
  background-color: #FF914D;

}
#signn:hover{
  background-color: #FF914D;

}


#sign ,#signn{
  display: block;
  
  padding: 2% 2%;
  width: 470px;
  font-size: 20px;
  margin: auto;
  margin-top: 20px;
  font-family: sans-serif;
  background-color: #03813A;

  border: none;
}

#date {
  margin-top: 0;
}

a {
  text-decoration: none;
  color: white;
}

#signdiv {
  padding: 4%;
  margin: auto;
  width: 45%;
  box-shadow: -20px -20px 60px #bebebe,
    20px 20px 60px #ffffff;
}

#email,
#password {

  font-family: sans-serif;
  margin-bottom: 0;
}
#contain{
  width: 80%;
  
  display: grid;
  margin: auto;
  gap: 20px;
  margin-top: 7%;
  grid-template-columns: repeat(3,1fr);
}
#contain>div>img{
  width: 80%;
  
}
#contain>div{
  padding: 2%;
  text-align: center;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
#contain>div>h3{
 
  font-family: sans-serif;
  font-size: large;
}
#search{
  display: block; margin: 3% auto 1%; width: 40%; font-size: 20px;text-align: left;
  border-radius: 15px;
}
#h11{
  text-align: center;
  margin-bottom: 3%;
}

@media all and (min-width:600px) and (max-width:1000px) {


  .slider-frame {
    overflow: hidden;
    height: 0px;
    width: 50%;
    margin: auto;
  
    margin-top: 40px;
  
  }
  
  @-webkit-keyframes slide-animation {
    0% {
      left: 0px;
    }
  
    10% {
      left: 0px;
    }
  
    30% {
      left: 1200px;
    }
  
    30% {
      left: 1200px;
    }
  
    40% {
      left: 2400px;
    }
  
    50% {
      left: 2400px;
    }
  
    60% {
      left: 1200px;
    }
  
    70% {
      left: 1200px;
    }
  
    80% {
      left: 0px;
    }
  
    90% {
      left: 0px;
    }
  
    100% {
      left: 0px;
    }
  
  }
  
  .slider-images {
    width: 3600px;
    height: 650px;
    margin: 0 0 0 -2400px;
    position: relative;
    -webkit-animation-name: slide-animation;
    -webkit-animation-duration: 7s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-play-state: running;
  }
  
  .images {
    height: 650px;
    width: 600px;
    position: relative;
    float: left;
  }

  .slider-frame>.slider-images>.images>img{
    height: 70%;
    width: 60%;
    margin-bottom: 0%;
}
  

  div>form>input,
label {
  padding: 1% 4%;

  font-size: 15px;

  display: block;
  margin: auto;
  text-align: left;
 width: 300px;
  
  
}
#h11{
  text-align: center;
  margin-bottom: 3%;
  font-size: 30px;
}
#sign ,#signn{
  display: block;
  
  padding: 2% 2%;
  width: 320px;
  font-size: 15px;
  margin: auto;
  margin-top: 10px;
  font-family: sans-serif;
  background-color: #03813A;

  border: none;
}
 #bottom-container>div>.head{
  font-size: 40px;
 }
 #bottom-container>div>.disc{
  font-size: 20px;
 }
 #bottom-container>div>img{
  width:100%;
 }
#signhead {
  margin: 4% 0;
  text-align: center;
  font-family: sans-serif;
  font-size: 30px;
}


  
}
@media all and (min-width:100px) and (max-width:599px) {
  
  .slider-frame {
    overflow: hidden;
    height:0px;
    width: 50%;
    margin: auto;
  
    margin-top: 40px;
  
  }
  
  @-webkit-keyframes slide-animation {
    0% {
      left: 0px;
    }
  
    10% {
      left: 0px;
    }
  
    30% {
      left: 1200px;
    }
  
    30% {
      left: 1200px;
    }
  
    40% {
      left: 2400px;
    }
  
    50% {
      left: 2400px;
    }
  
    60% {
      left: 1200px;
    }
  
    70% {
      left: 1200px;
    }
  
    80% {
      left: 0px;
    }
  
    90% {
      left: 0px;
    }
  
    100% {
      left: 0px;
    }
  
  }
  
  .slider-images {
    width: 3600px;
    height: 650px;
    margin: 0 0 0 -2400px;
    position: relative;
    -webkit-animation-name: none;
    -webkit-animation-duration: 7s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-play-state: running;
  }
  
  .images {
    height: 650px;
    width: 400px;
    position: relative;
    float: left;
  }

  .slider-frame>.slider-images>.images>img{
    height: 50%;
    width: 60%;
    margin-bottom: 0%;
}

  #h11{
    text-align: center;
    margin-bottom: 5%;
    font-size: 20px;
  }

  #sign ,#signn{
    display: block;
    
    padding: 5px;
    width: 200px;
    font-size: 15px;
    margin: auto;
    margin-top: 5px;
    font-family: sans-serif;
    background-color: #03813A;
  
    border: none;
  }

  div>form>input,
  label {
    padding: 1% 4%;
  
    font-size: 15px;
  
    display: block;
    margin: auto;
    text-align: left;
   width: 180px;
    
    
  }
  #signhead {
    margin: 4% 0;
    text-align: center;
    font-family: sans-serif;
    font-size: 20px;
  }

  #contain{
    
    grid-template-columns: repeat(1,1fr);
  }
  #bottom-container>div>.head{
    font-size: 40px;
   }
   #bottom-container>div>.disc{
    font-size: 20px;
   }
   #bottom-container>div>img{
    width:100%;
   }
  

  
  
}